jump to navigation

Create vertical and horizontal navigation menus with CSS May 31, 2008

Posted by fofo in CSS.
Tags:
trackback

The most often question i get when explaining XHTML and CSS is how to get create and style vertical and horizontal navigation menus with CSS. i will try to explain the process in this post and show how easy it is to change from a vertical to a horizontal menu. We always start by having a the proper markup. The main point to note here is that we are going to mark up the navigation links as an unordered lists.

Have a look at the code below:

<ul>
    <li><a href=”/”>Home</a></li>
    <li><a href=”/company/”>Company</a></li>
    <li><a href=”/products/”>Products</a></li>
    <li><a href=”/services/”>Services</a></li>
    <li><a href=”/people/”>People</a></li>
    <li><a href=”/contact/”>Contact</a></li>
  </ul>

 

because we need to distinguish this list from other lists in the page we will give it an id, navigation.

so the mark up will become like this

<ul id = “navigation”>
    <li><a href=”/”>Home</a></li>
    <li><a href=”/company/”>Company</a></li>
    <li><a href=”/products/”>Products</a></li>
    <li><a href=”/services/”>Services</a></li>
    <li><a href=”/people/”>People</a></li>
    <li><a href=”/contact/”>Contact</a></li>
  </ul>

Sometimes we need to seperate each item in the list from the other items. we can do that by adding an id to each element in the list. The markup becomes like this

 

<ul  id = “navigation”>
    <li id=”hom”><a href=”/”>Home</a></li>
    <li id=”comp”><a href=”/company/”>Company</a></li>
    <li id=”prod”><a href=”/products/”>Products</a></li>
    <li id=”serv”><a href=”/services/”>Services</a></li>
    <li id=”peop”><a href=”/people/”>People</a></li>
    <li id=”con”><a href=”/contact/”>Contact</a></li>
  </ul>

 

now we have the markup ready we can worry about the CSS. Let’s style the navigation id.Some straightforward CSS code follows. We style the background, and select a width and set padding and margin to 0.

#navigation {
  margin: 0;   
  padding: 0;
  background: #2683AE;
  list-style-type: none;
  width: 180px;
  font-size:1.4em;
  font-family:Verdana;
}

 

Then we set the CSS rules for the link elements.The rules are easy to follow.We add a border as well.

#navigation a {   
  display: block;

  color: #FFF;
  text-decoration: none;
  padding: 0 15px;
  line-height: 2.5;
  border-bottom: 1px solid #FFF;
}

Then we create the CSS rules for the hover.

#navigation a:hover { 
  background: #C1C1C1;
  color:red;
}

This last bit of CSS removes the bottom white border from the last link in the menu.

#navigation #con a {
  border: none;
}

 

This is the complete CSS. Place the code below in a seperate file with the name vertical.css

#navigation {
  margin: 0;   
  padding: 0;
  background: #2683AE;
  list-style-type: none;
  width: 180px;
  font-size:1.4em;
  font-family:Verdana;
 }
#navigation a {   
  display: block;  

  color: #FFF;
  text-decoration: none;
  padding: 0 15px;
  line-height: 2.5;
  border-bottom: 1px solid #FFF;
}
#navigation a:hover { 
  background: #C1C1C1;
  color:red;
}

#navigation #con a {
  border: none;
}

The completed markup follows. sav the code below in a file with a name of your choice and place it in the same folder where the .css file is.

<!DOCTYPE html PUBLIC “-//W3C//dtD XHTML 1.0 Strict//EN”
     “http://www.w3.org/TR/xhtml1/dtD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
  <title>Vertical Navigation</title>
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  <link rel=”stylesheet” href=”vertical.css” media=”screen” />
</head>
<body id=”body_his”>
<ul id=”navigation”>
    <li id=”hom”><a href=”/”>Home</a></li>
    <li id=”comp”><a href=”/company/”>Company</a></li>
    <li id=”prod”><a href=”/products/”>Products</a></li>
    <li id=”serv”><a href=”/services/”>Services</a></li>
    <li id=”peop”><a href=”/people/”>People</a></li>
    <li id=”con”><a href=”/contact/”>Contact</a></li>
  </ul>
</body>
</html>

Now if we need to change that vertical navigation menu to a horizontal menu we do not have to change our markup just the CSS code!!! the complete code for styling the menu horizontally follows. Have a look at the minor changes in the CSS rules that change our menu from vertical to horizontal.
#navigation {
  margin: 0;   
  padding: 0;
  background: #2683AE;
  list-style-type: none;
  width: 1026px;
  font-size:1.4em;
  float:left;
 }

#navigation li{
 margin:0;
 padding:0;
 float:left;
}

#navigation a {   
 
  float:left;
  width:168px;
  text-align:center;
  color: #FFF;
  text-decoration: none;
  line-height: 2.5;
 border-right:3px solid #fff;
}
#navigation a:hover { 
  background: #C1C1C1;
  color:red;
}

 

Comments»

1. Nezir - April 14, 2010

Nice and simple sample , thanks :)

Reply
2. rameshbhome - February 24, 2011

really nice

Reply
3. mame - August 2, 2011

Interesting, I really got this on my thoughts yesterday and after this I discovered your site.

Reply
4. Tshepo - March 26, 2012

Thanks a lot. It was very helpful.

Reply
5. prescription glasses for preschoolers - January 14, 2013

Thank you for any other informative website. The place else could I am getting that type of info written in such a perfect way?
I have a challenge that I am just now running on, and I’ve been at the glance out for such info.

Reply

Leave a comment